<div nv-file-drop uploader="ctrl.uploader">
  <div class="panel panel-default">
    <div class="panel-heading">
      <a href="" ui-sref="^.list" class="btn btn-xs btn-default"><i class="fa fa-arrow-left"></i></a>
      {{ 'Upload files' | translate }}
      <span class="text-muted" translate>You can just drag them in this window!</span>
      <span class="pull-right">
        <div class="file-input btn btn-xs btn-success btn-file">
          {{ 'Browse' | translate }}&hellip;
          <input nv-file-select type="file" uploader="ctrl.uploader" multiple/>
        </div>
      </span>
    </div>

    <table class="table table-bordered table-stiped">
      <tr>
        <th width="50%" translate>Name</th>
        <th ng-show="ctrl.uploader.isHTML5" translate>Size</th>
        <th ng-show="ctrl.uploader.isHTML5" translate>Progress</th>
        <th translate>Status</th>
        <th translate>Actions</th>
      </tr>
      <tr ng-repeat="item in ctrl.uploader.queue">
        <td><strong>{{ item.file.name }}</strong>
        </td>
        <td ng-show="ctrl.uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB
        </td>
        <td ng-show="ctrl.uploader.isHTML5">
          <div class="progress" style="margin-bottom: 0;">
            <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
          </div>
        </td>
        <td class="text-center">
          <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
          <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
          <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
        </td>
        <td nowrap>
          <div class="input-group pull-right btn-group btn-group-xs">
            <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()"
                    ng-disabled="item.isReady || item.isUploading || item.isSuccess">
              <span class="glyphicon glyphicon-upload"></span>
            </button>
            <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()"
                    ng-disabled="!item.isUploading">
              <span class="glyphicon glyphicon-ban-circle"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
    </table>

    <div class="panel-footer">
      <div class="row">
        <div class="col-md-3">
          {{ 'Upload queue' | translate }}
          <small> {{ ctrl.uploader.queue.length }} {{ 'in queue' | translate }}</small>
        </div>
        <div class="col-md-6">
          <div class="progress" style="margin-bottom: 0px;" ng-if="ctrl.uploader.progress">
            <div class="progress-bar" role="progressbar" ng-style="{ 'width': ctrl.uploader.progress + '%' }">
              {{ctrl.uploader.progress}}%
            </div>
          </div>
        </div>
        <div class="col-md-3" class="text-nowrap">
          <div class="pull-right btn-group" class="text-nowrap">
            <a class="btn btn-success btn-xs" ng-click="ctrl.uploader.uploadAll()"
               ng-disabled="!ctrl.uploader.getNotUploadedItems().length">
              {{ 'Upload' | translate }}
            </a>
            <a class="btn btn-warning btn-xs" ng-click="ctrl.uploader.cancelAll()"
               ng-disabled="!ctrl.uploader.isUploading">
              {{ 'Cancel' | translate }}
            </a>
            <a class="btn btn-danger btn-xs" ng-click="ctrl.uploader.clearQueue()"
               ng-disabled="!ctrl.uploader.queue.length">
              {{ 'Remove' | translate }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
